<template>
  <div>
    <div class="mb-20">
      <el-input class="mb-20" type="textarea" rows="5" v-model="userNameList" placeholder="accountName,张三,李四"></el-input>
      
      <el-button  @click="checkUser">检查用户</el-button>

      <div class="mt-20">
        <el-tag class="mr-5" v-for="item in userList" :key="item.id">{{ item.account }}</el-tag>
      </div>
    </div>
    <div class="mb-20">
      <el-input v-model="roleIds" placeholder="roleId,1,2,100"></el-input>
    </div>
    
    <div>
      <el-button @click="addRoles">为用户添加角色</el-button>
      <el-button type="danger" @click="removeRoles">为用户删减角色</el-button>
    </div>

  </div>
</template>

<script>
import {
  getUserDetail,
  update,
} from "@/api/system/user";
export default {
  data() {
    return {
      userList: [],
      userNameList: '',
      roleIds: '',
    };
  },
  methods: {
    async getUser() {
      this.userList = []
      const userNameList = this.userNameList.split(',').filter(item => item);
      return Promise.all(userNameList.map(item => {
        return getUserDetail({account: item})
      })).then((res) => {
        // 处理结果
        this.userList = res.map(data => data.data.data)
        return this.userList
      }).catch(function (error) {
        // 处理错误
        this.$message({
          type: 'error',
          message: '检查所有用户名是否正确'
        })
      });
    },
    async checkUser() {
      this.getUser()
    },
    async addRoles() {
      if (!this.roleIds) {
        return
      }
      let userList = this.userList
      if (!userList || !userList.length) {
        userList = await this.getUser()
      }
      const valid = await this.$confirm('确认为用户添加角色？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      })
      if (valid) {
        await Promise.all(userList.map(user => {
          const roleIds = Array.from(new Set([...user.roleId.split(','), ...this.roleIds.split(',')]))
          update({
            ...user,
            password: undefined,
            roleId: roleIds.join(',')
          })
        })).then(res => {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '添加失败'
          })
        })
      }
    },
    async removeRoles() {
      if (!this.roleIds) {
        return
      }
      let userList = this.userList
      if (!userList || !userList.length) {
        userList = await this.getUser()
      }
      const valid = await this.$confirm('确认移除用户角色？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      })
      if (valid) {
        await Promise.all(userList.map(user => {
          const removeRoleIds = this.roleIds.split(',')
          const roleIds = user.roleId.split(',').filter(item => !removeRoleIds.includes(item))
          update({
            ...user,
            password: undefined,
            roleId: roleIds.join(',')
          })
        })).then(res => {
          this.$message({
            type: 'success',
            message: '移除成功'
          })
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '移除失败'
          })
        })
      }
    }
  }
};
</script>
<style lang="scss" scoped>

</style>